<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div>
        chrome浏览器，查看Storage的方法：<br>
        1. 右上角三个点按钮，依次打开“更多工具”、“开发者工具”。<br>
        2. 打开“Application 应用程序”选项卡。<br>
        3. 在Storage页，选择“LocalStorage”或“SessionStorage”。<br>
        4. 选择目标页面，查看右侧的键值对。也可以手动进行添加、修改、选中清除。<br>
    </div>

    <hr>

    <h3>localStorage</h3>
    <div>
        <input type="text" id="local_storage_key" placeholder="key">
        <input type="text" id="local_storage_value" placeholder="value"> <br>
        <button id="btn_localstorage_set">set</button>
        <button id="btn_localstorage_get">get</button>
        <button id="btn_localstorage_remove">remove</button>
    </div>
    <script>
        var inputLocalStorageKey = document.getElementById('local_storage_key');
        var inputLocalStorageValue = document.getElementById('local_storage_value');
        var btnLocalStorageSet = document.getElementById('btn_localstorage_set');
        var btnLocalStorageGet = document.getElementById('btn_localstorage_get');
        var btnLocalStorageRemove = document.getElementById('btn_localstorage_remove');

        btnLocalStorageSet.addEventListener('click', function (event) {
            if (typeof Storage == 'undefined') {
                return;
            }

            var key = inputLocalStorageKey.value;
            var value = inputLocalStorageValue.value;
            localStorage.setItem(key, value);
        });
        btnLocalStorageGet.addEventListener('click', function (event) {
            if (typeof Storage == 'undefined') {
                return;
            }

            var key = inputLocalStorageKey.value;
            var value = localStorage.getItem(key);
            inputLocalStorageValue.value = value;
        });
        btnLocalStorageRemove.addEventListener('click', function (event) {
            if (typeof Storage == 'undefined') {
                return;
            }

            var key = inputLocalStorageKey.value;
            localStorage.removeItem(key);
        });
    </script>

    <hr>

    <h3>sessionStorage</h3>
    <div>
        <input type="text" id="session_storage_key" placeholder="key">
        <input type="text" id="session_storage_value" placeholder="value"> <br>
        <button id="btn_sessionstorage_set">set</button>
        <button id="btn_sessionstorage_get">get</button>
        <button id="btn_sessionstorage_remove">remove</button>
    </div>
    <script>
        var inputSessionStorageKey = document.getElementById('session_storage_key');
        var inputSessionStorageValue = document.getElementById('session_storage_value');
        var btnSessionStorageSet = document.getElementById('btn_sessionstorage_set');
        var btnSessionStorageGet = document.getElementById('btn_sessionstorage_get');
        var btnSessionStorageRemove = document.getElementById('btn_sessionstorage_remove');

        btnSessionStorageSet.addEventListener('click', function (event) {
            if (typeof Storage == 'undefined') {
                return;
            }

            var key = inputSessionStorageKey.value;
            var value = inputSessionStorageValue.value;
            sessionStorage.setItem(key, value);
        });
        btnSessionStorageGet.addEventListener('click', function (event) {
            if (typeof Storage == 'undefined') {
                return;
            }

            var key = inputSessionStorageKey.value;
            var value = sessionStorage.getItem(key);
            inputSessionStorageValue.value = value;
        });
        btnSessionStorageRemove.addEventListener('click', function (event) {
            if (typeof Storage == 'undefined') {
                return;
            }

            var key = inputSessionStorageKey.value;
            sessionStorage.removeItem(key);
        });
    </script>


</body>

</html>